<template>
    <div>
        <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/active/seconds' }">
        <i class="el-icon-s-shop"></i> 
        活动管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>拼团管理</el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div style="width: 100%; padding: 20px 0 0;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="排序" >
    <el-input v-model="ruleForm.sorts" :keyup="ruleForm.sorts=ruleForm.sorts.replace(/\D/g,'')" style="width: 300px;" ></el-input>
    <p style="font-size:13px; color: red;">*数字越小,排名越靠前,默认排序为创建时间</p>
  </el-form-item>
  <el-form-item label="选择商品" prop="name" >
    <el-input v-model="ruleForm.name" disabled style="width: 300px;" ></el-input> <el-button @click="opensp">选择商品</el-button>
  </el-form-item>
   <!-- 选择商品弹出框 -->
  <el-dialog title="选择商品" :modal="false" :visible.sync="dialogTableVisible">
    <div class="spsearch">
    <p>药品名称</p>
    <el-input v-model="input" :keyup="input=input.replace(/[^\w\u4E00-\u9FA5]/g, '')" style="width: 50%;" ></el-input>
    <el-button size="small" style="padding: 13px 12px; "  @click="onsearch" >搜索</el-button>
  </div>
  <el-table :data="shops" height="300px">
    <el-table-column width="500" label="商品">
      <template slot-scope="scope">
        <div class="msj_shoplist">
          <div class="msj_shoplist_img">
            <img :src="scope.row.img" alt="">
          </div>
          <span>{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column  label="操作">
      <template slot-scope="scope">
        <el-button :type="scope.row.id==xuan.id?'danger':'primary'" @click="handel(scope.row)" style="padding: 5px;" size="small">{{scope.row.id==xuan.id?'取消':'选择'}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="width: 100%; padding: 10px 0; display: flex; justify-content: center;">
    <el-button type="primary"   size="small" @click="onbaocun">保存</el-button>
    <el-button   size="small" @click="quxiao">取消</el-button>
  
  </div>
</el-dialog>
  <!-- 遮罩层 -->
<div class="zhezhao" v-show="dialogTableVisible">
</div>
  <el-form-item label="分类" prop="region">
    <el-select v-model="ruleForm.region" >
      <el-option v-for="(item,index) in fenlei" :key="index" :label="item.fltitles" :value="item.fltitles"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="拼团价格" required>
    <el-col :span="5">
      <el-form-item prop="pinprice">
        <el-input  v-model="ruleForm.pinprice" :keyup="ruleForm.pinprice=ruleForm.pinprice.replace(/[^\d.]/g,'')" style="width: 200px;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="1">
        <span>原价</span>
    </el-col>
    <el-col :span="5">
      <el-form-item prop="yuanprice">
        <el-input  v-model="ruleForm.yuanprice" :keyup="ruleForm.yuanprice=ruleForm.yuanprice.replace(/[^\d.]/g,'')" style="width: 200px;"></el-input>
      </el-form-item>
    </el-col>
  </el-form-item>

  <el-form-item label="库存" prop="type">
    <el-input  v-model="ruleForm.type" :keyup="ruleForm.type=ruleForm.type.replace(/\D/g,'')" style="width: 200px;"></el-input>
  </el-form-item>

  <el-form-item label="详情" prop="resource">
    <el-input type="textarea" :keyup="ruleForm.resource=ruleForm.resource.replace(/\s+/g, '')"  v-model="ruleForm.resource"></el-input>
  </el-form-item>

  <el-form-item v-show="datas.isstate" label="状态" >
    <el-radio-group v-model="ruleForm.states">
      <el-radio label="仓库中"></el-radio>
      <el-radio label="已上架"></el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    <el-button @click="resetForm()">返回商品列表</el-button>
  </el-form-item>
</el-form>
    </div>
    </div>
</template>

<script>
import { getmsjpinfenlei,getZwyShopListBx,addmsjpinshops,setmsjpinshops } from '@/utils/api'
export default {
    name: 'PhaemacyAddspellshop',

    data() {
        return {
            breadcrumb:'添加商品',
            ruleForm: {
            sorts:'',
          name: '',
          region: '',
          pinprice: '',
          yuanprice: '',
          type: '',
          resource: '',
          states:'仓库中',
        },
        rules: {
          name: [
            { required: true, message: '请选择药品', trigger: 'blur' },
          ],
          region: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
          pinprice: [
            {  required: true, message: '请填写拼团价格', trigger: 'change' }
          ],
          yuanprice: [
            {  required: true, message: '请填写原价', trigger: 'change' }
          ],
          type: [
            {  required: true, message: '请填写库存', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请填写详情', trigger: 'change' }
          ],
        },
        fenlei:[],
        xuan:{},
        shops:[],
        dialogTableVisible:false,
        input:'',
        datas:{}
        };
    },
    created(){
        let  data=this.$route.params.data?this.$route.params:JSON.parse(sessionStorage.getItem('spellsshop')) 
        this.datas=data
        console.log(data);
        getmsjpinfenlei().then(res=>{
            this.fenlei=res.data.data.filter(v=>v.state=='1')
            this.ruleForm.sorts=data.isadd?'':data.data.sorts
            this.ruleForm.region=data.isadd?this.fenlei[0].fltitles:data.data.fenlei
            this.ruleForm.pinprice=data.isadd?'':data.data.tuangou
            this.ruleForm.yuanprice=data.isadd?'':data.data.dangou
            this.ruleForm.type=data.isadd?'':data.data.kucun
            this.ruleForm.resource=data.isadd?'':'详情1111'
            this.ruleForm.states=data.isadd? this.ruleForm.states:(data.data.state=='仓库中'?'仓库中':'已上架')
        })
       this.shopslist()
    },
    mounted() {
        
    },

    methods: {
        // 获取所有 商品 查找商品 
       shopslist(){
        getZwyShopListBx().then(res=>{
        let data=res.data.data
        if(this.datas.isadd==0){
            this.xuan=data.find(item=>item.name==this.datas.data.spinfo.name)||this.datas.data.spinfo
            this.ruleForm.name=this.datas.data.spinfo.name
        }
        
        this.shops=this.input==''?data:data.filter(item=>item.name.includes(this.input))
      })
      },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let pinprice=Number(this.ruleForm.pinprice) 
            let yuanprice=Number(this.ruleForm.yuanprice)
            if(!isNaN(pinprice)&&!isNaN(yuanprice)){
                if(pinprice>yuanprice){
                    this.$message.error('拼团价不能大于原价');
                }else{
                    let spinfo={
                        name:this.xuan.name,
                        img:this.xuan.img,
                    }
                    let obj={
                        sorts:this.ruleForm.sorts==''?'0':this.ruleForm.sorts,
                        tuangou:pinprice.toFixed(2),
                        dangou:yuanprice.toFixed(2),
                        kucun:this.ruleForm.type,
                        fenlei:this.ruleForm.region,
                        xiaol:'66',
                        spinfo:JSON.stringify(spinfo),
                        state:this.ruleForm.states=='已上架'?'上架':this.ruleForm.states,
                    }
                    if(Number(obj.kucun)<1){
                      this.$message.error('库存不能小于1');
                    }else{
                        (this.datas.isadd?addmsjpinshops(obj):setmsjpinshops({id:this.datas.data.id,...obj})).then(res=>{
                        this.$message.success(res.data.msg)
                        this.resetForm()
                      })
                    }
                      

                    

                    
                }
            }else{
                this.$message.error('请填写正确的价格');
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
       this.$router.push({
            name:'spell',
            params: {
                curr:1
            }
       })
      },
// 打开选择商品弹出框
      opensp(){
        this.dialogTableVisible=true
      },
      // 选择 取消商品 
      handel(v){
        this.xuan=v.id==this.xuan.id?{}:v
      },
      // 搜索商品
      onsearch(){
        this.shopslist()
      },
      // 关闭商品弹出框 
      quxiao(){
        this.dialogTableVisible=false
      },
      // 保存
      onbaocun(){

let flag=JSON.stringify(this.xuan)
if(flag=='{}'){
  this.$message.error('请选择商品')
}else{
  this.ruleForm.name=this.xuan.name
  this.quxiao()
}
},
    },
};
</script>

<style scoped>

 .zhezhao{
  width: 100%;
  height: 100vh;
  background: #333;
  z-index: 999;
  opacity: 0.5;
  position: fixed;
  top: 0; left: 0;
}

.spsearch{
  width: 100%;
  display: flex; align-items: center;
}
.spsearch p{
  width: 100px;
  text-align: center;
}
.msj_shoplist{
  display: flex; align-items: center;
  font-size: 14px;
}
.msj_shoplist span{
  display: inline-block;
  width: 100%; text-align: center;
}
.msj_shoplist_img{
  width: 150px; box-sizing: border-box;
  padding: 0 15px;
}
.msj_shoplist_img img{
  width: 50px;
}
.msj_author{
  width: 80px; margin: 5px 0 0;
  height: 80px;
  background: #eee;
  color: #ccc;
  font-size: 20px;
  display: flex; position: relative;
  justify-content: center;
  align-items: center;
}
.msj_author img{
  width: 100%;
  height: 100%;
}
</style>